<!-- TreeNode.vue -->
<template>
	<view>
		<!-- 节点主体 -->
		<view class="tree-node" :style="{ paddingLeft: `${level * 20+4}px` }">
			<view class="node-content" @click.stop="handleClick">
				<!-- 折叠箭头 -->
				<view @click.stop="toggleExpand">
					<uni-icons v-if="hasChildren" :type="isExpanded ? 'down' : 'right'" size="14" class="arrow-icon"
						:class="{ expanded: isExpanded }" />
				</view>
				<!-- 节点标签 -->
				<view class="node-label" :class="{ selected: isSelected }" :style="{
            marginLeft: hasChildren ? '4px' : '20px',
            color: isSelected ? '#409eff' : '#333'
          }">
					{{ node[config.label] || 'Unnamed Node' }}
				</view>
			</view>
		</view>

		<!-- 子节点容器 -->
		<view v-if="hasChildren && isExpanded" class="children-container">
			<tree-node v-for="child in node[config.children]" :key="child[config.value] || Math.random()" :node="child"
				:level="level + 1" :props="config" :selected="selected" @node-click="handleChildClick" />
		</view>
	</view>
</template>

<script>
	// 确保已在全局注册 uni-icons 组件
	const defaultProps = {
		label: 'label',
		children: 'children',
		value: 'id'
	}

	export default {
		name: 'TreeNode',

		props: {
			node: {
				type: Object,
				required: true,
				validator: value => value && typeof value === 'object'
			},
			level: {
				type: Number,
				default: 0,
				validator: value => value >= 0
			},
			props: {
				type: Object,
				default: () => ({
					...defaultProps
				})
			},
			selected: {
				type: [String, Number, Array],
				default: null
			}
		},

		data() {
			return {
				isExpanded: false
			}
		},

		computed: {
			config() {
				return {
					...defaultProps,
					...this.props
				}
			},

			hasChildren() {
				try {
					const children = this.node[this.config.children]
					return Array.isArray(children) && children.length > 0
				} catch (e) {
					console.error('Error accessing children:', e)
					return false
				}
			},

			isSelected() {
				try {
					const nodeValue = this.node[this.config.value]
					if (!nodeValue) return false

					if (Array.isArray(this.selected)) {
						return this.selected.includes(nodeValue)
					}
					return this.selected === nodeValue
				} catch (e) {
					console.error('Selection check error:', e)
					return false
				}
			}
		},

		methods: {
			toggleExpand(event) {
				event.stopPropagation()
				this.isExpanded = !this.isExpanded
			},

			handleClick(event) {
				event.stopPropagation()
				if (!this.node) {
					console.warn('Clicked node is invalid')
					return
				}
				this.$emit('node-click', this.node)
			},

			handleChildClick(node) {
				this.$emit('node-click', node)
			}
		}
	}
</script>

<style scoped>
	/* 保持原有样式不变 */
	.tree-node {
		padding: 8px 0px;
		font-size: 34rpx ;
		transition: background-color 0.3s;
	}

	.tree-node:hover {
		background-color: #f5f7fa;
	}

	.node-content {
		display: flex;
		align-items: center;
	}

	.arrow-icon {
		transition: transform 0.3s;
		margin-right: 4px;
	}

	.expanded {
		transform: rotate(180deg);
	}

	.node-label {
		transition: color 0.3s;
	}

	.node-label.selected {
		font-weight: 600;
		color: #409eff;
	}

	.children-container {
		overflow: hidden;
		transition: all 0.3s;
	}
</style>